<!-- 设备状态 -->
<script lang="ts" setup>
import { computed, ref, watch, onUnmounted, onMounted, markRaw } from "vue";
import * as echarts from "echarts";
import { QueryInfo } from "../../api/index";

const currentEnv = import.meta.env.MODE

import DetailModal from "./DetailModal.vue";
import { ElMessage } from "element-plus";

const props = defineProps(["faultData", "feederData", "statusData", "logData"]);

const feederList = ref<any[]>([]);
watch(
  () => props.feederData,
  (newVal, oldVal) => {
    feederList.value = newVal;
  }
);

const statusList = ref<any[]>([
  {
    Number: "0",
    Name: "离线",
    Qty: "0",
  },
  {
    Number: "1",
    Name: "待机",
    Qty: "0",
  },
  {
    Number: "2",
    Name: "运行",
    Qty: "0",
  },
  {
    Number: "3",
    Name: "故障",
    Qty: "0",
  },
]);
watch(
  () => props.statusData,
  (newVal, oldVal) => {
    statusList.value = newVal;
  }
);

const logList = ref<any[]>([]);
watch(
  () => props.logData,
  (newVal, oldVal) => {
    logList.value = newVal;
  }
);

export type EChartsCoreOption = echarts.EChartsCoreOption;
//获取chart实例
const chart = ref();
//获取echarts
let myChart = ref();

const faultOptions = ref({
  title: {
    text: "单位：次",
    left: 130,
    top: 12,
    textStyle: {
      color: "#799ac1",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: 50,
  },
  xAxis: {
    type: "value",
    position: "top",
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false,
      color: "#799ac1",
    },
  },
  yAxis: {
    type: "category",
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: "#799ac1",
      fontSize: 18,
    },
    axisLine: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    // name: "Name",
    data: [],
  },
  series: [
    {
      data: [],
      type: "bar",
      itemStyle: {
        borderRadius: 4, // 统一设置四个角的圆角大小
      },
      showBackground: true,
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)",
        borderRadius: 4, // 统一设置四个角的圆角大小
        // borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
      },
      barWidth: 26,
      color: "#409eff",
      label: {
        show: true,
        color: "#fff",
        fontSize: 16,
        position: 'right',
      },
    },
  ],
});
//状态统计
watch(
  () => props.faultData,
  (newVal: any, oldVal) => {
    // console.log('new', newVal)
    const { xList, yList } = newVal;
    faultOptions.value.yAxis.data = JSON.parse(
      JSON.stringify(yList.slice().reverse())
    );
    faultOptions.value.series[0].data = JSON.parse(
      JSON.stringify(xList.slice().reverse())
    );
    myChart.value.setOption(faultOptions.value);
  },
  {
    deep: true,
  }
);
window.addEventListener("resize", () => {
  myChart.value?.resize();
});

const initChart = () => {
  myChart.value = markRaw(
    echarts.init(chart.value, "white", { width: "420px", height: "860px" })
  );
  myChart.value.setOption(faultOptions.value);
};

//设备详情弹框
const detailRef = ref();
//点击设备，展示详情
const showDetail = (data: any) => {
  const { FID } = data;
  QueryInfo({
    InputStr: `OperType=GetFeederInfo;$;FID=${FID}`,
    JsonStr: [],
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
    }
    detailRef.value.open(res.data.FeederInfo[0]);
  });
};

let imageSrc = ref();
onMounted(() => {
  initChart();
  //使用electron读取图片
  // readImg()
});
async function readImg() {
  const res = await window.electronAPI.readImage()
  imageSrc.value = res
}
//卸载时销毁实例
onUnmounted(() => {
  window.removeEventListener("resize", myChart.value);
  // 卸载echarts实例
  myChart.value.dispose();
});

</script>
<template>
  <div class="flex">
    <div class="basis-1/5">
      <!-- 图表 -->
      <div>
        <!-- 状态统计信息 -->
        <!-- <div class="w-full">
          <p>状态统计</p>
          <div style="width: 100%; height: 240px">
            <BaseEcharts :options="statusOptions" />
          </div>
        </div> -->
        <div class="w-full">
          <p>故障统计</p>
          <div class="-mt-10" style="width: 100%; height: 770px">
            <div ref="chart" class="w-full h-full" :option="faultOptions"></div>
          </div>
        </div>
        <!-- 日志信息 -->
        <!-- <div class="w-full table-box -mt-12">
          <p>日志信息</p>
          <el-table
            :data="logList"
            class="mt-2 ml-4"
            height="250"
            style="width: 480px;"
          >
            <el-table-column
              align="center"
              prop="DateTime"
              label="时间"
              width="200"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              prop="Name"
              label="名称"
              width="100"
              show-overflow-tooltip
            />
            <el-table-column
              align="center"
              prop="Description"
              label="事件"
              show-overflow-tooltip
            />
          </el-table>
        </div> -->
      </div>
    </div>
    <div class="basis-4/5">
      <!-- 设备状态 -->
      <div class="device-status flex items-center">
        <p>设备状态</p>
        <div class="flex items-center btn-box ml-16">
          <template v-for="(item, index) in statusList" :key="index">
            <div v-if="item.Number == '0'">
              <p class="flex items-center">
                <el-button size="large" class="mr-1">{{ item.Name }}</el-button
                >&nbsp;{{ item.Qty }}
              </p>
            </div>
            <div v-if="item.Number == '1'">
              <p class="flex items-center ml-1">
                <el-button size="large" class="my-btn mr-1">{{
                  item.Name
                }}</el-button
                >&nbsp;{{ item.Qty }}
              </p>
            </div>
            <div v-if="item.Number == '2'">
              <p class="flex items-center ml-1">
                <el-button size="large" class="btn-green mr-1">{{
                  item.Name
                }}</el-button
                >&nbsp;{{ item.Qty }}
              </p>
            </div>
            <div v-if="item.Number == '3'">
              <p class="flex items-center ml-1">
                <el-button size="large" class="btn-red mr-1">{{
                  item.Name
                }}</el-button
                >&nbsp;{{ item.Qty }}
              </p>
            </div>
          </template>
        </div>
      </div>
      <!-- IP&站别信息 -->
      <div class="w-full flex flex-row mt-8">
        <div class="w-full station-info flex flex-wrap">
          <template v-for="(item, index) in feederList" :key="index">
            <div
              :class="[
                'item',
                'mt-3',
                (index + 1) % 5 === 0 ? 'last-item' : '',
              ]"
              @click="showDetail(item)"
            >
              <div
                class="flex justify-center items-center item-img text-center m-auto"
              >
                <p class="mr-1">{{ item.Name }}</p>
                <img v-if="currentEnv == 'development'" :src="`/feeder/${item.Status}.png`" alt="Image" />
                <img v-else :src="`http://localhost:5101/Feeder/Img/${item.Status}.png`" alt="Local Image" />
              </div>
              <div class="mt-3 item-info text-center">
                <p>IP: {{ item.IP }}</p>
                <p class="mb-2">Station: {{ item.Station }}</p>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
  <DetailModal ref="detailRef" />
</template>

<style lang="less" scoped>
@import "../../style/common.less";
@import "../../style/control.less";
</style>
